<template>
  <pre
    :style="{
        width: /px|\%|rem/.test(width) ? width : width + 'px',
        height: /px|\%|rem/.test(height) ? height : height + 'px'
    }"
  ></pre>
</template>

<script>
import AceEditor, { edit } from "brace";
export default {
  props: {
    value: String,
    mode: {
      required: true,
      type: String
    },
    theme: {
      required: true,
      type: String
    },
    width: [String, Number],
    height: [String, Number]
  },
  data() {
    return {
      editor: null
    };
  },
  watch: {
    value(value) {
      this.editor.setValue(value);
    }
  },
  mounted() {
    this.editor = AceEditor.edit(this.$el);
    this.mode && this.editor.session.setMode("ace/mode/" + this.mode);
    this.theme && this.editor.setTheme("ace/theme/" + this.theme);
    this.editor.setValue(this.value);
    this.editor.on("change", e => {
      this.$emit("input", this.editor.getValue());
    });
  }
};
</script>
